<script setup>
import {router} from "@/plugins/1.router/index.js";

const props = defineProps({
  headerTabs: {
    type: Number,
    default: 0
  },
})
import standarGradeHeader from '@/pages/platform/components/standarGradeHeader.vue'
/** 本页面按照功能划分功能和函数;*/
import {useApi} from "@/composables/useApi.js";
import {ref} from "vue";
import {
  columnarIndex,
  distributionIndex, qualityDistributionIndex,
  qualityStandardRadar,
  standardGradesTotal,
  standardRadar
} from "@/api/studentGrades.js";
import {qualityColumnar, qualityDetailInfo} from "@/api/quality.js";

const required = (value, name) => !!value || `${name}为必填字段`;

/** 标化成绩检索更新表格/图标开始*/
const standardForm = ref({
  examcourse_id: '',
  grade_id: -1
})
/** 场次列表*/
const sessionList = ref([])
// 校验


// 获取年级列表开始
const gradeList = ref([])
const getGradeList = async () => {
  const {data} = await useApi('/teacher/Api.Grade/indexList').post({})
  if (data.value.status == 200) {
    console.log(data.value.data)
    gradeList.value = data.value.data
    if (gradeList.value.length != 0) {
      await getClassList()
    }
  }
}
// 获取年级列表结束
/** 标化成绩检索更新表格/图标结束*/

/** 渲染班级成绩柱状图开始*/
const classGradesTipsList = [
  {title: '德', color: '#6ecefe'},
  {title: '智', color: '#9edb71'},
  {title: '体', color: '#5fd1bf'},
  {title: '美', color: '#fed060'},
  {title: '劳', color: '#76a7e2'},
]
const scoresBarType = ref(1)
const scoresRadarType = ref(1)
const scoresChange = (args) => {
  getStandardChartData()
}
const scoresRadarChange = (val) => {
  console.log(val)
  getStandardRadar()
}
const subjectChange = () => {
  getStandardPie()
}
const scoresTypeList = ref([
  {
    type: 1,
    title: '最高分',
  }, {
    type: 2,
    title: '中位数',
  }, {
    type: 3,
    title: '平均分',
  }])
// 科目列表
const subjectList = ref([
  {
    type: 1,
    title: '总分',
  }, {
    type: 2,
    title: '德',
  }, {
    type: 3,
    title: '智',
  }, {
    type: 4,
    title: '体',
  },
  {
    type: 5,
    title: '美',
  },
  {
    type: 6,
    title: '劳',
  }
])
const subject = ref(1)
/** 渲染班级成绩柱状图结束*/
/** 获取班级列表开始*/
const class_id = ref([])
const classList = ref([])
const getClassList = async () => {
  console.log(standardForm.value.grade_id)
  const {data} = await useApi('/teacher/Api.GradeClass/indexList').post({grade_id: standardForm.value.grade_id===-1?'':standardForm.value.grade_id})
  if (data.value.status == 200) {
    console.log(data.value.data)
    classList.value = data.value.data
    class_id.value = [data.value.data[0].class_id]
  }
}
/** 获取班级列表结束*/

/** 表格开始*/
const selectedItems = ref([]);
const total = ref(0)
const list = ref([])
let queryFrom = ref({
  page: 1,
  limit: 20,
  student_id: '',
  student_name: '',
  grade_id: '',
  class_id: '',
  examcourse_id: ''
})
const headers = [
  {
    title: "学生姓名",
    key: "real_name",
    width: "240px",
    align: 'start',
  },
  {
    title: "学生ID",
    width: "240px",
    align: 'start',
    key: "student_id",
  },
  {
    title: "年级",
    width: "240px",
    align: 'start',
    key: "gradeTitle",
  },
  {
    title: "班级",
    width: "240px",
    align: 'start',
    key: "classTitle",
  },
  {
    title: "德",
    width:"240px",
    align: 'start',
    key: "averageScores1",
  },
  {
    title: "智",
    width:"240px",
    align: 'start',
    key: "averageScores2",
  },
  {
    title: "体",
    width:"240px",
    align: 'start',
    key: "averageScores3",
  },

  {
    title: "美",
    width:"240px",
    align: 'start',
    key: "averageScores4",
  },
  {
    title: "劳",
    width:"240px",
    align: 'start',
    key: "averageScores5",
  },
  {
    title: "操作",
    align: 'end',
    key: "options",
    sortable: false,
  },
]
const getList = async () => {
  const {data} = await useApi('/student/Api.Quality/studentIndex').post({ ...standardForm.value, ...queryFrom.value})
  total.value = data.value.data.total
  list.value = data.value.data.data.map(item => {
    return {
      ...item, id: item.standardization_id
    }
  })
}
const onChangePage = (val) => {
  queryFrom.value.page = val.page
  queryFrom.value.limit = val.limit
  getList()
}
// 头部表单回调
const onChange = val => {
  console.log(val)
  let data = JSON.parse(JSON.stringify(val))
  queryFrom.value = {...queryFrom.value, ...data}
  queryFrom.value.real_name = val.student_name
  console.log(queryFrom.value)
  getList()
}

/** 表格结束 */

/**
 * 获取标化成绩顶部总数量开始
 */
const qualityGrades = ref({})
const standardBarList = ref({})
const standardRadarList = ref([])
const standardPieList = ref([])
const totalPeople = ref(0)
const getStandardGradesTotal = () => {
  qualityDetailInfo(standardForm.value).then(res => {
    console.log(res)
    totalPeople.value = res.data.studentNum
    qualityGrades.value = res.data.scoreArr.map((item,index)=>{
      return{
        ...item,...totalDisplayList.value[index]
      }
    })
  })

}

/**
 * 获取标化成绩顶部总数量结束
 * */
/** 获取柱状图数据开始*/
const getStandardChartData = () => {
  qualityColumnar({...standardForm.value, type: scoresBarType.value}).then(res => {
    console.log(res)
    standardBarList.value = res.data
  })

}
/** 获取柱状图数据结束*/
/** 获取标化雷达图开始*/
const getStandardRadar = () => {

  // standardRadarList.value = [{
  //   name:"2班",
  //   value:[231, 88, 77, 66]
  // }]
  // return
  qualityStandardRadar({...standardForm.value, type: scoresRadarType.value, class_id: class_id.value}).then(res => {
    console.log(res.data)
    standardRadarList.value = res.data
  })
}
/** 获取标化雷达图结束*/
/** 获取标化雷达图开始*/
const getStandardPie = () => {
  // standardPieList.value = [
  //   {
  //     "name": "<60",
  //     "value": 19
  //   },
  //   {
  //     "name": "60-70",
  //     "value": 20
  //   },
  //   {
  //     "name": "70-90",
  //     "value": 55
  //   },
  //   {
  //     "name": "90-100",
  //     "value": 78
  //   }
  // ]
  // return
  qualityDistributionIndex({...standardForm.value, type: subject.value}).then(res => {
    console.log(res.data)
    standardPieList.value = res.data
  })
}
/** 获取标化雷达图结束*/
/** 初始化开始*/
const changeSession = () => {
  console.log(standardForm.value)
  getStandardPie()
  getStandardRadar()
  getStandardChartData()
  getList()
  getStandardGradesTotal()
}
/** 初始化结束*/
const totalDisplayList = ref([
  {
    backgroundColor: '#DAF3FF',
    color: '#16B1FF',
    title:'德'
  },
  {
    backgroundColor: 'rgba(158, 219, 113, 0.2)',
    color: '#9EDB71',
    title:'智'
  },
  {
    backgroundColor: 'rgba(95, 209, 191, 0.16)',
    color: 'rgba(95, 209, 191, 1)',
    title:'体'
  },
  {
    backgroundColor: 'rgba(254, 208, 96, 0.16)',
    color: 'rgba(254, 208, 96, 1)',
    title:'美'
  },
  {
    backgroundColor: 'rgba(118, 167, 226, 0.16)',
    color: 'rgba(118, 167, 226, 1)',
    title:'劳'
  },
])
/** 查看学生详情*/
const viewDetail = item => {
  router.push(`/archives/qualityStudentDetail?id=${item.student_id}`)
}
const notAllHeaders = [...headers.slice(0, 2),...headers.slice(3)]
const getSessionList =  () => {

  getList()
  getGradeList()
  getStandardGradesTotal()
  getStandardChartData()
  getStandardRadar()
  getStandardPie()

}
getSessionList()
</script>

<template>
  <!--      标化成绩-->
  <div class="main-box">
    <!--      搜索栏-->
    <div class="search-box">
      <div class="flex right-box right-summary">
        <div class="icon-box ">
          <i class="ri-user-3-line" style="font-size: 20px;"></i>
        </div>
        <div class="">
          {{standardForm.grade_id==-1?'全校':gradeList.find(item=>item.grade_id == standardForm.grade_id)?.title||'全校'}}总人数：{{ totalPeople }}
        </div>
      </div>
      <el-select
        style="width: 160px;"
        v-model="standardForm.grade_id"
        @change="changeSession"
        placeholder="年级"
        class="input-width-height ml-auto"
        :teleported="false"
      >
        <el-option :value="-1" label="全校" ></el-option>
        <el-option v-for="(item,index) in gradeList" :key="index" :label="item.title" :value="item.grade_id"></el-option>
      </el-select>
    </div>
    <!--      展示总览-->
    <div class="text-display">
      <div v-for="(item,index) in qualityGrades " :key="item" class=" text-display-item">
        <div>
          <div class="title">
            最高分
          </div>
          <div>
            {{ items?.max || 0 }}
          </div>
        </div>
        <div>
          <div class="title">
            平均分
          </div>
          <div>
            {{ items?.avg || 0 }}
          </div>
        </div>
        <div>
          <div class="title">
            中位数
          </div>
          <div>
            {{ items?.median || 0 }}
          </div>
        </div>
        <div class="icon-box" :style="{backgroundColor:item.backgroundColor,color:item.color} ">
            {{item.type}}
        </div>
      </div>
    </div>
    <!--      班级柱状图-->
    <div class="mt-5 class-bar-box">
      <div class="flex-box chart-line">
        <div class="title">五育得分柱状图</div>
        <div class="flex-box tip-item" v-for="(item,index) in classGradesTipsList" :key="index">
          <div class="color-box" :style="{backgroundColor:item.color}"></div>
          <div class="name">
            {{ item.title }}
          </div>
        </div>
        <div class="ml-auto">
          <el-select
            class="ml-6"
            v-model="scoresBarType"
            @change="scoresChange"
            popper-class="mySelectStyle"
            style="width: 120px;"
            :teleported="false"
          >
            <el-option
              v-for="item in scoresTypeList"
              :key="item.type"
              :label="item.title"
              :value="item.type"
            />
          </el-select>
        </div>
      </div>
      <bar-chart display-type="2" :data-list="standardBarList"></bar-chart>
    </div>
    <!--      雷达图 分数分布    -->
    <div class="mt-5 flex-box">
      <div class="radar-box box-shadow">
        <div class="flex-box chart-line">
          <div class="title">雷达图</div>
          <div class="ml-auto">
            <el-select
              class="ml-6"
              v-model="scoresRadarType"
              @change="scoresRadarChange"
              popper-class="mySelectStyle"
              style="width: 120px;"
              :teleported="false"
            >
              <el-option
                v-for="item in scoresTypeList"
                :key="item.type"
                :label="item.title"
                :value="item.type"
              />
            </el-select>

          </div>
          <div>
            <el-select
              class="ml-6"
              v-model="class_id"
              @change="scoresRadarChange"
              multiple
              collapse-tags
              popper-class="mySelectStyle"
              style="width: 160px;"
              :teleported="false"
            >
              <el-option
                v-for="item in classList"
                :key="item.class_id"
                :label="item.grade_title+'-'+item.title"
                :value="item.class_id"
              />
            </el-select>
          </div>

        </div>
        <radar-chart v-if="standardRadarList.length!=0" :isQuality="true" height="430px" :data-list="standardRadarList"></radar-chart>
      </div>
      <div class="radar-box box-shadow" style="margin-left: 4%">
        <div class="flex-box chart-line ">
          <div>
            <div class="title">分数分布</div>
            <div class="tip">所在分布区间内人数占的比例</div>
          </div>
          <div class="ml-auto">
            <el-select
              class="ml-2"
              v-model="subject"
              @change="subjectChange"

              popper-class="mySelectStyle"
              style="width: 120px;"
              :teleported="false"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.type"
                :label="item.title"
                :value="item.type"
              />
            </el-select>
          </div>
        </div>
        <pie-chart :data-list="standardPieList" height="420px"></pie-chart>
      </div>
    </div>
    <!--          底部 table-->
    <div class="mt-10">
      <standar-grade-header :title="standardForm.grade_id==-1?'学生列表':gradeList.find(item=>item.grade_id == standardForm.grade_id)?.title+'学生列表'"
                            :grade-id="standardForm.grade_id"
                            :display-flag="true"
                            @onChange="onChange"
      />
      <VDataTable
        v-model="selectedItems"
        :headers="standardForm.grade_id==-1?headers:notAllHeaders"
        :items="list"
      :items-per-page="100"
        item-key="id"
        show-select
        class="text-no-wrap"
      >
        <template #item.averageScores1="{ item }">
          <div class="d-flex align-center ">
            <div class="d-flex flex-column  ">
              {{item.averageScores[0]}}
            </div>
          </div>
        </template>
        <template #item.averageScores2="{ item }">
          <div class="d-flex align-center ">
            <div class="d-flex flex-column ">
              {{item.averageScores[1]}}
            </div>
          </div>
        </template>
        <template #item.averageScores3="{ item }">
          <div class="d-flex align-center ">
            <div class="d-flex flex-column  ">
              {{item.averageScores[2]}}
            </div>
          </div>
        </template>
        <template #item.averageScores4="{ item }">
          <div class="d-flex align-center ">
            <div class="d-flex flex-column  ">
              {{item.averageScores[3]}}
            </div>
          </div>
        </template>
        <template #item.averageScores5="{ item }">
          <div class="d-flex align-center ">
            <div class="d-flex flex-column">
              {{item.averageScores[4]}}
            </div>
          </div>
        </template>
        <template #item.options="{ item }">
          <div class="d-flex align-center options-right-display">
            <div class="flex-column cursor-pointer">
              <i @click="viewDetail(item)" class="ri-menu-line"></i>
            </div>
          </div>
        </template>
      </VDataTable>
      <pagination-vue
        @onChange="onChangePage"
        :current-page="queryFrom.page"
        :page-size="queryFrom.limit"
        :total="total"
      />
    </div>
  </div>
</template>


<style scoped lang="scss">
.box-shadow {
  border-radius: 6px;
  box-shadow: 0px 4px 10px 0px rgb(var(--v-theme-box-shadow));
  padding: 24px;
}

.header-box {
  background-color: rgb(var(--v-theme-surface));
  display: flex;
  align-items: center;
  height: 62px;
  padding: 12px 0 12px 24px;
  border-radius: 8px 8px 0 0;

  .title {
    font-family: PingFang SC;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

  }

  .tabs {
    margin-left: 30px;
    display: flex;
    align-items: center;

    .active {

      background-color: rgba(140, 87, 255, 0.16);
      border-radius: 6px;
      color: rgba(140, 87, 255, 1);
    }

    .item {
      padding: 22px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      font-size: 16px;
      align-items: center;
      width: 128px;
      height: 38px;
      margin-right: 4px;
      cursor: pointer;

      > i {
        font-size: 18px;
        margin-right: 4px;
      }
    }
  }
}

.main-box {
  background-color: rgb(var(--v-theme-surface));

  .right-summary {
    display: flex;
    align-items: center;
    font-family: Inter;
    font-size: 24px;
    font-weight: 500;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

    .icon-box {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(240, 239, 240, 1);
      border-radius: 6px;
      margin-right: 10px;
      font-size: 14px;
    }
  }

  .search-box {
    background-color: rgb(var(--v-theme-surface));
    display: flex;
    align-items: center;
  }

  .text-display {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

    .text-display-item {
      margin-top: 10px;
      width: 19.5%;
      display: flex;
      justify-content: space-between;
      box-shadow: 0px 4px 10px 0px rgb(var(--v-theme-box-shadow));
      padding: 20px;
      border-radius: 6px;

      .icon-box {
        width: 42px;
        height: 42px;
        padding: 8px;
        font-size: 20px;

        border-radius: 6px;
        background: rgba(218, 243, 255, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(22, 177, 255, 1);
      }

      .title {
        font-family: PingFang SC;
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        margin-bottom: 10px;
      }

    }
  }

  .class-bar-box {
    box-shadow: 0px 4px 10px 0px rgb(var(--v-theme-box-shadow));
    padding: 20px;
    border-radius: 6px;


  }

  .radar-box {
    width: 48%;
    height: 500px;
  }
}

.chart-line {
  height: 30px;

  .title {
    font-family: PingFang SC;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-right: 15px;
  }

  .tip {
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: rgba(46, 38, 61, 0.55);
  }

  .tip-item {
    display: flex;
    align-items: center;
    margin-left: 30px;

    .color-box {
      width: 16px;
      height: 16px;
      border-radius: 1px;
      margin-right: 8px;
    }
  }
}
::v-deep(.el-select__wrapper),
::v-deep(.el-select-dropdown){
  background-color: rgb(var(--v-theme-surface));
}

::v-deep(.el-popper.is-light .el-popper__arrow::before) {
  background-color: rgb(var(--v-theme-surface));
}

::v-deep(.el-select__wrapper){
  background-color: rgb(var(--v-theme-surface));
}
::v-deep(.el-select-dropdown__item){
  color: rgb(140, 87, 255);
}
</style>
